<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- <ul>
      <li>
        电器
        <ul>
          <li>彩电</li>
          <li>冰箱</li>
        </ul>
      </li>
      <li>数码</li>
      <li>洗涤</li>
    </ul> -->

    <div id="list"></div>
    <script>
      const ctgs = [
        {
          name: "家用电器",
          children: [{ name: "冰箱" }, { name: "彩电" }, { name: "洗衣机" }],
        },
        {
          name: "数码",
          children: [
            {
              name: "手机",
              children: [{ name: "华为" }, { name: "苹果" }, { name: "小米" }],
            },
            { name: "相机" },
          ],
        },
        { name: "洗涤", children: [{ name: "洗衣液" }] },
      ];

      console.log(JSON.stringify(ctgs, null, 2));

      function printCtgs(ctgs) {
        const lis = ctgs
          .map((el) => {
            if (el.children) {
              return `
              <li>
                ${el.name}
                ${printCtgs(el.children)}
              </li>`;
            } else {
              return `<li>${el.name}</li>`;
            }
          })
          .join("");
        return `
          <ul>
            ${lis}
          </ul>
        `;
      }

      document.getElementById("list").innerHTML = printCtgs(ctgs);
      console.log(printCtgs(ctgs));
    </script>
  </body>
</html>
